<template>
  <div>
    <div
      v-if="image === ''"
      :class="returncss"
      :style="{ height: clientHeight + 'px'}"
      ref="homePage"
    >
      <img
        v-if="tabIndex === 1 "
            crossOrigin='Anonymous'
        src="./right1.png"
        class="right"
      >
      <img
        v-if="tabIndex === 2"
            crossOrigin='Anonymous'
        src="./right.png"
        class="right"
      >
      <img
        v-if="tabIndex === 1 "
            crossOrigin='Anonymous'
        src="./left1.png"
        class="left"
      >
      <img
        v-if="tabIndex === 2"
            crossOrigin='Anonymous'
        src="./left.png"
        class="left"
      >
      <section
        v-if="tabIndex === 1"
        class="title ttitle"
      >{{ tabIndex === 1 ? '知运在线教育平台':'适合全家人学习的在线教育平台'}}</section>
      <section
        v-if="tabIndex === 2"
        class="title tea"
      >{{ tabIndex === 1 ? '知运在线教育平台':'适合全家人学习的在线教育平台'}}</section>
      <section
        v-if="tabIndex === 3"
        class="title teas"
      >全新的教育平台</section>
      <div class="content">
        <div class="content-text">
          <p
            v-if="tabIndex === 1"
            class="content-text-pt"
          >{{ tabIndex === 1 ? '教师新机会':'学生新机会'}}</p>
          <p
            v-if="tabIndex === 2"
            class="content-text-ps"
          >{{ tabIndex === 1 ? '教师新机会':'学生新机会'}}</p>
          <p
            v-if="tabIndex === 3"
            class="content-text-ps"
            style="color:#b4b7e8;"
          >邀请机会</p>
          <div v-html="text">
          </div>
        </div>
        <div class="content-text-two">
          <div class="conetnt-flex">
            <section>
              <img
                 crossOrigin='Anonymous'
                :src="erweima"
                class="erweima"
              >
            </section>
            <section
              class="info-box"
              v-if="tabIndex === 1 || tabIndex === 2"
            >
              <img :src="user"     crossOrigin='Anonymous'/>
              <div class="name-nick">{{userinfo.nick_name}}</div>
              <div class="ninck">邀请你共同学习</div>
            </section>
            <section
              v-if="tabIndex === 3"
              style="color:#999;font-size:12px; position: relative;"
            >
              <img
                :src="user"
                    crossOrigin='Anonymous'
                style="width: calc(100vw * 108 / 750);
                      height: calc(100vw * 108 / 750);
                      border-radius: 50%;"
              />
              <div class="tabIndex3">
                识别二维码，下载知运App<br />免费体验
              </div>
            </section>
          </div>
          <section
            v-if="tabIndex === 1 || tabIndex === 2"
            :class="tabIndex === 1 ? 'buton-se btn-t': 'buton-se btn-s'"
          >长按保存图片</section>
          <section
            v-if="tabIndex === 3"
            class="buton-se btn-t"
          >长按保存图片</section>
        </div>
      </div>
    </div>
    <div class="postion">
      <div
        @click="tab(1)"
        :class="tabIndex === 1 ? 'co-tab':'' "
      >招老师</div>
      <div
        @click="tab(2)"
        :class="tabIndex === 2 ? 'co-tab':'' "
      >招学员</div>
      <div
        @click="tab(3)"
        :class="tabIndex === 3 ? 'co-tab':'' "
      >下载</div>
    </div>
    <img
      v-if="image !== ''"
      crossOrigin='Anonymous'
      :src="image"
      class="end-image"
    >
  </div>
</template>

<script>
import { pushErweima, posterdownload } from '@/api/assemble'
import { baseToQiniu } from '@/api/center'
import { mapState } from 'vuex'
import html2canvas from 'html2canvas'
export default {
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id
    }),
    returncss () {
      if (this.tabIndex === 1) {
        return 'modify bg-one'
      } else if (this.tabIndex === 2) {
        return 'modify bg-two'
      } else {
        return 'modify bg-three'
      }
    }
  },
  data () {
    return {
      imagesss: '',
      user: '',
      text: '我知道你拥有满腹才华，却无处施展。我了解你渴望教书育人，却苦无平台。现在，机会就在眼前。知运，为你提供平台。',
      tabIndex: 1,
      userinfo: '',
      erweima: '',
      image: '',
      WinWidth: '',
      WinHeight: '',
      showPositionValue: false, // 是否显示提示
      loading: true,
      clientHeight: '',
      change: true,
      bendiimgurl: '',
      getBarWidth: function (index) {
        return 30 + 'px'
      }
    }
  },
  methods: {
    tab (tab) {
      this.image = ''
      if (tab === 1) {
        this.text = '我知道你拥有满腹才华，却无处施展。我了解你渴望教书育人，却苦无平台。现在，机会就在眼前。知运，为你提供平台。'
      } else if (tab === 2) {
        this.text = '孩子学习跟不上，怎么办？找知运。工作业绩不好，怎么办？找知运。父母深陷养生骗局，养老钱不翼而飞，怎么办？找知运。'
      } else {
        this.text = '有能力！就来知运在线开启你的授课之旅<br/>想学习！知运在线教育提供丰富的知识点'
      }
      console.log(this.tabIndex, tab)
      if (this.tabIndex !== tab) {
        this.tabIndex = tab
        this.geterwei()
      }
    },
    geterwei () {
      this.$vux.loading.show({
      })
      let fun = pushErweima
      let obj = {
        curriculum_id: 0,
        member_id: this.user_id
      }
      if (this.tabIndex === 3) {
        obj.url = 'xiazai'
        fun = posterdownload
      }
      fun(obj).then(res => {
        if (res.data.code === 200) {
          this.erweima = res.data.data.data
          let arr = res.data.data.data.split('?')
          let str = arr[0]
          let cover = res.data.data.user_list.cover
          let stb = cover.replace('http://thirdwx.qlogo.cn', 'http://web.zhiyunzaixian.com/wechat_image')
          this.user = stb
          console.log(123321)
          console.log(this.user)
          console.log(123321)
          str = str.replace('https://mp.weixin.qq.com', 'http://web.zhiyunzaixian.com/wechat_qrcode')
          this.erweima = `${str}?${arr[1]}`
          this.userinfo = res.data.data.user_list
          // let erImg = new Image()
          // erImg.src = this.erweima
          // erImg.crossOrigin = 'anonymous'
          // document.querySelector('.modify').appendChild(erImg)
          // document.querySelector('.modify').appendChild(canvas)
          // this.drawImage()
          // }
          // erImg.onload = () => {
          //  proxy: 'http://web.zhiyunzaixian.com'

          if (this.erweima !== '' && this.userinfo.cover) {
            this.$vux.loading.hide()
            this.$nextTick(() => {
              html2canvas(document.querySelector('.modify'), {
                useCORS: true
              }).then((canvas) => {
                console.log(1233121312)

                // console.log(1233121312)
                this.imagesss = canvas.toDataURL()
                // console.log()
                if (this.imagesss !== '') {
                  // let yanng = {
                  //   file: this.imagesss
                  // }
                  this.image = this.imagesss
                  // baseToQiniu(yanng).then(res => {
                  //   let { data, code } = res.data
                  //   if (code === 200) {
                  //     this.image = data.filepath
                  //     this.$vux.loading.hide()
                  //     this.$store.commit('updateLoadingStatus', { isLoading: false })
                  //   }
                  // })
                }
              })
            })
          }
        }
      })
    }
    // drawImage () {
    //   this.WinHeight = document.documentElement.clientHeight
    //   this.WinWidth = document.documentElement.clientWidth
    //   let img = document.getElementById('tulip')
    //   let c = document.getElementById('myCanvas')
    //   let ctx = c.getContext('2d')
    //   // 获取窗口可见高度
    //   this.$nextTick(() => {
    //     let nImg = new Image()
    //     nImg.src = this.erweima
    //     console.log(nImg)
    //     nImg.crossOrigin = 'anonymous'
    //     nImg.onload = () => {
    //       let erweima = nImg
    //       img.width = this.WinWidth * 2 * 0.692
    //       c.width = this.WinWidth * 2
    //       c.height = img.height * 2
    //       // console.log(img.width, img.height)
    //       // console.log(img.width / img.height)
    //       ctx.drawImage(img, 0, 0, this.WinWidth * 2, img.height * 2)
    //       console.log('background')
    //       let erweimaw = this.WinWidth * 2 * 0.079
    //       let erweimah = img.height * 2 * 0.842
    //       // console.log(parseInt(erweimah))
    //       ctx.drawImage(erweima, parseInt(erweimaw), parseInt(erweimah), 0.187 * this.WinWidth * 2, 0.187 * 2 * this.WinWidth)
    //       //  100, this.WinHeight, 0, 0, this.WinWidth, this.WinHeight
    //       console.log('er')
    //       this.image = c.toDataURL('image/jpeg')
    //       console.log('sheng')
    //       // var finalResult = ctx.toDataURL('image/png')
    //     }
    //   })
    // }
  },
  created () {
    this.$store.commit('updateLoadingStatus', { isLoading: false })
  },
  mounted () {
    this.geterwei()
    // 获取浏览器可视区域高度
    this.clientHeight = `${document.documentElement.clientHeight}` // document.body.clientWidth;
    window.onresize = function temp () {
      this.clientHeight = `${document.documentElement.clientHeight}`
    }
  }
}
</script>

<style lang="less" scoped>
.hecheng {
  position: fixed;
  top: 0;
}
.ooooo {
  position: absolute;
  top: calc(100% * 0.836);
  left: calc(100% * 0.079);
  width: calc(100% * 0.187);
}
#tulip {
  width: 100%;
  height: 100%;
  position: relative;
}
#myCanvas {
  // position: fixed;
  // top: 0;
  // left: 0;
}
.hecheng {
  // position: fixed;
  // top: 0;
  // left: 0;
  // z-index: 99999;
}
.modify {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  box-sizing: border-box;
  font-size: 14px;
  color: #1a1a1a;
  width: 100%;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
}
.bg-one {
  background-image: url("./bg2.png");
  background-size: 100% calc(100vw * 480 / 750);
  background-color: #ffc564;
}
.bg-two {
  background-image: url("./bg1.png");
  background-size: 100% 100%;
}
.bg-three {
  background-image: url("./bg3.png");
  background-size: 100% 100%;
}
.title {
  color: #fff;
  text-align: center;
  line-height: calc(100vw * 66 / 750);
  position: absolute;
  top: calc(100vw * 418 / 750);
  width: calc(100vw * 407 / 750);
  height: calc(100vw * 66 / 750);
  border-radius: 5px;
  left: 50%;
  margin-left: calc(100vw * -203 / 750);
  z-index: 1;
}
.tea {
  background-image: linear-gradient(0deg, #fea960 0%, #f4531f 100%);
}
.teas {
  background-image: linear-gradient(0deg, #a7a9e2 0%, #6a6ccd 100%);
}
.ttitle {
  background-image: linear-gradient(0deg, #5c21ea 0%, #762ee4 100%);
}
.content {
  width: calc(100vw * 686 / 750);
  height: calc(100vw * 682 / 750);
  background-color: #fff;
  position: absolute;
  top: calc(100vw * 453 / 750);
  border-radius: 29/2px;
  left: 50%;
  margin-left: calc(100vw * -686 / 750 / 2);
}
.right {
  position: absolute;
  right: calc(100vw * 140 / 750);
  top: calc(100vw * 420 / 750);
}
.left {
  position: absolute;
  left: calc(100vw * 140 / 750);
  top: calc(100vw * 418 / 750);
}
.content-text {
  width: calc(100vw * 606 / 750);
  height: calc(100vw * 219 / 750);
  background-color: #f0f4ff;
  border-radius: 18px;
  margin: calc(100vw * 55 / 750) auto 0 auto;
}
.content-text > p {
  width: 100%;
  text-align: center;
  padding-top: calc(100vw * 25 / 750);
  font-family: PingFangSC-Regular;
  font-size: calc(100vw * 30 / 750);
}
.content-text > .content-text-pt {
  color: #5e53f0;
}
.content-text > .content-text-ps {
  color: #ee481a;
}
.content-text > div {
  width: calc(100vw * 492 / 750);
  text-align: center;
  padding-top: calc(100vw * 25 / 750);
  font-family: PingFangSC-Regular;
  color: #666;
  font-size: calc(100vw * 24 / 750);
  padding-bottom: 23px;
  margin: 0 auto;
}
.content-text-two {
  width: calc(100vw * 606 / 750);
  height: calc(100vw * 350 / 750);
  background-color: #f0f4ff;
  border-radius: 18px;
  margin: calc(100vw * 30 / 750) auto 0 auto;
}
.conetnt-flex {
  width: 100%;
  padding: calc(100vw * 21 / 750) calc(100vw * 26 / 750) 0
    calc(100vw * 26 / 750);
  box-sizing: border-box;
  display: flex;
}
.conetnt-flex > section:first-child {
  width: calc(100vw * 220 / 750);
  height: calc(100vw * 220 / 750);
  background-color: #fff;
  border-radius: calc(100vw * 20 / 750);
  padding: calc(100vw * 12 / 750);
}
.conetnt-flex > section:last-child {
  flex: 1;
  text-align: center;
}
.erweima {
  width: 100%;
  height: 100%;
}
.info-box > img {
  width: calc(100vw * 108 / 750);
  height: calc(100vw * 108 / 750);
  border-radius: 50%;
}
.name-nick {
  margin-top: calc(100vw * 20 / 750);
  font-family: PingFangSC-Regular;
  font-size: calc(100vw * 25 / 750);
  color: #333;
}
.ninck {
  font-family: PingFangSC-Regular;
  margin-top: calc(100vw * 16 / 750);
  font-size: calc(100vw * 24 / 750);
  color: #333333;
}
.buton-se {
  width: calc(100vw * 284 / 750);
  height: calc(100vw * 65 / 750);
  border-radius: calc(100vw * 33 / 750);
  margin: calc(100vw * 22 / 750) auto 0 auto;
  color: #ffffff;
  text-align: center;
  line-height: calc(100vw * 65 / 750);
}
.btn-t {
  background-image: linear-gradient(90deg, #a771ff 0%, #6324e9 100%);
}
.btn-s {
  background-image: linear-gradient(90deg, #ffac62 0%, #f44f1b 100%);
}
.end-image {
  position: fixed;
  z-index: 99;
  top: 0;
  width: 100vw;
  height: 100vh;
}
.postion {
  z-index: 100;
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  height: calc(100vw * 86 / 750);
  line-height: calc(100vw * 86 / 750);
  color: #ffffff;
  font-family: PingFangSC-Regular;
  font-size: calc(100vw * 30 / 750);
  background-color: rgba(0, 0, 0, 0.5);
}
.co-tab {
  color: #ee481a;
  background-color: rgba(0, 0, 0, 0.5);
}
.postion > div {
  flex: 1;
  text-align: center;
}
.postertxt {
  font-size: 14px;
  color: #333333;
  text-align: center;
  line-height: 30px;
}
.tabIndex3 {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}
</style>
